<template>
    <div>
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button
            type="primary"
            :loading="expLoading"
            @click="handleDownload" 
          >
            下载二维码
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                color: 'error',
                label: '离线',
                popConfirm: {
                  title: '是否确认离线',
                  confirm: handleOffline.bind(null, record.id),
                },
              },
            ]"
          />
        </template>
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.key === 'statusName'">
            <a-tag color="#A8A8A8" v-if="record.statusName=='离线'" >离线</a-tag>
            <a-tag color="#4CC000" v-if="record.statusName=='空闲'" >空闲</a-tag>
            <a-tag color="#DC0000" v-if="record.statusName=='充电中'" >充电中</a-tag>
            <a-tag color="#ff7900" v-if="record.statusName=='已插抢'" >已插枪</a-tag>
          </template>
        </template>
      </BasicTable>
      <EditModal @register="registerModal" @success="handleSuccess" />
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
import { defHttp } from '@/utils/http/axios';
  export default defineComponent({
    name: 'PileList',
  });
  </script>
  <script lang="ts" setup>
  import { onMounted, ref, h, watch } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { downloadBlob } from '@/utils/file/download';
  import { useMessage } from '@/hooks/web/useMessage';
  const props = defineProps({
    stationId: {
      type: String,
      default: () => [],
    },
  });
  const expLoading = ref(false);
  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerTable, { reload, getSelectRows, getSelectRowKeys }] =
    useTable({
      api: '/admin/pile/list',
      columns: [
    //   ID	充电终端编号	充电终端名称	Can	状态	SOC	使用用户	 实时电压(V)	 实时电流(A)	 实时功率(W)	 实时电量(kWh)
        {
          title: 'ID',
          dataIndex: 'id',
          width: 100,
          fixed: 'left',
        },
        {
          title: '充电终端编号',
          dataIndex: 'pileSn',
          width: 150,
        },
        {
          title: '充电终端名称',
          dataIndex: 'name',
          width: 150,
        },
        {
          title: 'Can',
          dataIndex: 'canIndex',
          width: 100,
          
        },
        {
          title: '状态',
          dataIndex:'statusName',
          width: 100,
        },
        {
          title: 'SOC',
          dataIndex:'soc',
          width: 150,
          customRender: ({ record }) => {
            return record.soc=='-' ? '-' : h('Progress', {percent: record.soc })
          }
        },
        {
          title: '使用用户',
          dataIndex: 'member',
          width: 150,
        },
        {
          title: '实时电压(V)',
          dataIndex: 'voltageD',
          width: 100,
          customRender: ({ record }) => {
            return record.voltageD ? Number.parseFloat(record.voltageD).toFixed(2) : 0
          }
        },
        {
          title: '实时电流(A)',
          dataIndex: 'currentD',
          width: 100,
          customRender: ({ record }) => {
            return record.currentD ? Number.parseFloat(record.currentD).toFixed(2) : 0
          }
        },
        {
          title: '实时功率(W)',
          dataIndex: 'powerD',
          width: 100,
          customRender: ({ record }) => {
            return record.powerD ? Number.parseFloat(record.powerD).toFixed(2) : 0
          }
        },
        {
          title: '实时电量(kWh)',
          dataIndex: 'electricityD',
          width: 100,
          customRender: ({ record }) => {
            return record.electricityD ? Number.parseFloat(record.electricityD).toFixed(2) : 0
          }
        },
      ],
      useSearchForm: true,
      showIndexColumn: true,
      indexColumnProps: {
        fixed: 'left',
      },
      pagination: true,
      bordered: true,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      rowKey: 'id',
      rowSelection: {
        type: 'checkbox',
      },
      beforeFetch: (params) => {
        if (props.stationId) {
            params.id = props.stationId;
        }
        return params;
      }
    });
  watch(() => props.stationId, () => {
    reload();
  })
  async function handleOffline(id: string) {
    const res = await defHttp.post({ url: `/admin/pile/offline/${id}` });
    createMessage.success(res);
    reload();
  }
  async function handleDownload() {
    try {
        expLoading.value = true;
        const res = await defHttp.get({ url: `/admin/file/batchDownload?id=${props.stationId}`, responseType: 'blob' }, { isReturnNativeResponse: true });
        downloadBlob(res);
    } finally {
        expLoading.value = false;
    }
  }
  function handleSuccess() {
    reload();
  }
  </script>
  